<template>
  <header class="header">
    <nav class="navBar">
      <router-link to="/" class="iconLink">
        <div>
          <i class="iconfont icon-sun"></i>
          <p>新中地天气</p>
        </div>
      </router-link>
      <div class="left">
        <h4>{{ localCity.city }}</h4>
        <span class="text-sm"
          >实时天气：{{ localCityWeather }} {{ localCityTemperature }}℃</span
        >
        <span class="text-sm"
          >{{ localCityWindDirection }}风{{ localCityWindPower }}级</span
        >
      </div>
      <div class="right">
        <i class="iconfont icon-infomation"></i>
        <i
          v-if="route.name === 'city'"
          class="iconfont icon-plus"
          @click="handleClick"
        ></i>
      </div>
    </nav>
  </header>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useWeatherStore } from '@/stores/weather'
import { useRoute } from 'vue-router'

const route = useRoute()

const {
  localCity,
  localCityWeather,
  localCityTemperature,
  localCityWindDirection,
  localCityWindPower,
} = storeToRefs(useWeatherStore())

const props = defineProps({
  cityAdcode: {
    type: String,
    default: '',
  },
  cityName: {
    type: String,
    default: '',
  },
})

// const emits = defineEmits(['addCity'])
const handleClick = () => {
  // 保存城市信息到 localStorage
  if (props.cityAdcode && props.cityName) {
    // 获取现有的保存城市列表
    const savedCities = JSON.parse(localStorage.getItem('savedCities') || '[]')
    
    // 检查城市是否已保存
    const isCitySaved = savedCities.some(city => city.adcode === props.cityAdcode)
    
    // 如果城市未保存，则添加到列表中
    if (!isCitySaved) {
      savedCities.push({
        adcode: props.cityAdcode,
        name: props.cityName
      })
      localStorage.setItem('savedCities', JSON.stringify(savedCities))
    }
  }
  // emits('addCity', props.cityAdcode, props.cityName)
  // console.log(props.cityAdcode, props.cityName)
}
</script>

<style lang="scss" scoped>
@import 'http://at.alicdn.com/t/c/font_5006120_l4gem9gb31k.css';

.header {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-bg-opacity: 1;
  background-color: rgb(0 102 138 / var(--tw-bg-opacity));
  z-index: 10;
  position: sticky;
  top: 0px;
  .navBar {
    flex-direction: row;
    display: flex;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    gap: 1rem;
    align-items: center;
    max-width: 1536px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 10rem;
    padding-left: 10rem;
    .iconLink {
      color: inherit;
      text-decoration: inherit;
      div {
        gap: 0.75rem;
        align-items: center;
        display: flex;
        i {
          font-size: 1.5rem;
          line-height: 2rem;
          font-weight: 900;
          font-family: 'Font Awesome 6 Free';
          -webkit-font-smoothing: antialiased;
          display: var(--fa-display, inline-block);
          font-style: normal;
          font-variant: normal;
          line-height: 1;
          text-rendering: auto;
          color: white;
        }
        p {
          font-size: 1.5rem;
          line-height: 2rem;
          margin: 0;
        }
      }
    }
    .left {
      gap: 1rem;
      align-items: center;
      display: flex;
      .text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }
    }
    .right {
      gap: 0.75rem;
      justify-content: flex-end;
      flex: 1 1 0%;
      display: flex;
      .iconfont {
        transition-duration: 1s;
        font-size: 2rem;
        line-height: 1.75rem;
        cursor: pointer;
        font-weight: 900;
        font-family: 'Font Awesome 6 Free';
        -webkit-font-smoothing: antialiased;
        display: var(--fa-display, inline-block);
        font-style: normal;
        font-variant: normal;
        line-height: 1;
        text-rendering: auto;
        color: white;
      }
    }
  }
}
</style>
